<template>
    <div class="footer">
        <div class="wrap">
            <div class="l">
                <img src="@/assets/img/slogan.7730f7f2.png" alt="">
                <p class="txt">
                    叩丁狼是一家专注于培养高级IT技术人才，为学员提供定制化IT职业规划方案及意见咨询服务的教育科技公司，
                    为您提供海量优质课程，以及创新的线上线下学习体验，帮助您获得全新的个人发展和能力提升。
                </p>
            </div>
            <div class="c">
                <img src="@/assets/img/wx.5584e874.png" alt="">
                <ul>
                    <li>微信公众号</li>
                    <li>新浪微博</li>
                    <li>在线客服</li>
                </ul>
            </div>
            <div class="r">
                <p class="title">全国免费咨询热线：</p>
                <p class="phone">020-85628002</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: '',
        components: {

        },
        props: {

        },
        data() {
            return {

            };
        },
        methods: {

        },
        watch: {

        },
        created() {

        },
        mounted() {

        },
        computed: {

        },
    };
</script>

<style scoped lang="less">
    .footer {
        height: 240px;
        background: #242B39;

        .wrap {
            height: 100%;
            display: flex;

            .l {
                width: 426px;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;

                img {
                    width: 300px;
                    cursor: pointer;
                }

                .txt {
                    margin-top: 27px;
                    font-size: 12px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 20px;
                    color: #7D879A;
                }
            }

            .c {
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: flex-end;

                img {
                    margin-top: 10px;
                    width: 97px;
                }

                ul {
                    margin-top: 10px;
                    display: flex;
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #7D879A;

                    li {
                        width: 97px;
                        text-align: center;
                        border-left: 1px solid #7D879A;
                        cursor: pointer;

                        &:first-child {
                            border: none;
                        }
                    }
                }
            }

            .r {
                padding-left: 120px;
                width: 240px;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .title {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #7D879A;
                }

                .phone {
                    margin-top: 10px;
                    font-size: 28px;
                    font-family: SourceHanSansSC;
                    font-weight: bold;
                    color: #FFFFFF;
                }
            }
        }
    }
</style>